<template>
  <div class="orderSignin">
    <div v-if="isExceed == false">
      <div class="title">签到</div>
      <div class="exec" v-if="signInlength > 0">{{ execNum }}</div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            {
              required: true,
              message: '手机号不能为空',
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '手机号格式不正确',
            },
          ]"
        />

        <div style="margin: 16px">
          <van-button
            round
            block
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
      <div class="infoContent" v-if="signInlength > 0">
        <div class="info" v-for="(item, index) in signInlist" :key="index">
          <div class="deliveryLeft">
            <div class="deliveryDate">{{ item.sendDate }}</div>
            <div class="deliveryDate">
              <!-- <div>预约时间段:</div> -->
              <div>{{ item.startSlot }}~{{ item.endSlot }}</div>
            </div>
            <div class="deliveryDate">
              <div>送货单数:</div>
              <div>{{ item.sendOrder }}</div>
            </div>
            <div class="deliveryDate">
              <div>送货件数:</div>
              <div>{{ item.sendCount }}</div>
            </div>
            <div class="deliveryDate">
              <div>货物类型:</div>
              <div>{{ item.goodsType | statusGoodstype(that) }}</div>
            </div>
          </div>
          <div class="deliveryRight">
            <el-button
              size="medium"
              type="success"
              v-if="item.reservationStatus == '0'"
              @click="handleSignin(item.id)"
              >签到</el-button
            >
          </div>
        </div>
      </div>
      <div class="infoContent" v-if="signInlength == 0">暂无需要签到信息</div>
    </div>
    <div v-else>
      <div class="title">二维码已过期</div>
    </div>
  </div>
</template>

<script>
import {
  isOutTimeData,
  getselectReservationSign,
  updateReservation,
  updateDriver,
  ExecCount,
} from "@/api/system/reservation";
import { Dialog } from "vant";
export default {
  dicts: ["goods_type"],
  data() {
    return {
      phone: "",
      qRCodetimeStamp: "",
      isExceed: null,
      signInlength: null,
      // 货物类型
      goodsColumns: [],
      that: this,
      iphone: "",
      // 未履约次数
      execNum: "",
    };
  },
  created() {
    this.getDicts("goods_type").then((response) => {
      console.log(response.data);
      response.data.forEach((item) => {
        this.goodsColumns.push({
          value: item.dictValue,
          label: item.dictLabel,
        });
      });
      console.log(this.goodsColumns);
    });
    // 获取URL中的参数值
    function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return "";
      return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    let url = window.location.href;
    this.qRCodetimeStamp = getParameterByName("outTime", url);
  },
  mounted() {
    this.outTimelist();
  },
  filters: {
    statusGoodstype(value, that) {
      const dict = {};
      that.goodsColumns.forEach((item) => {
        dict[item.value] = item.label;
      });
      return dict[value] || value;
    },
  },
  methods: {
    outTimelist() {
      isOutTimeData({ outTime: this.qRCodetimeStamp }).then((res) => {
        // console.log(res);
        this.isExceed = res.data;
      });
    },
    async onSubmit(values) {
      this.iphone = values.phone;
      console.log("submit", values);
      getselectReservationSign({
        phone: values.phone,
        reservationStatus: "0",
      }).then((res) => {
        this.signInlist = res.data;
        this.signInlength = res.data.length;
        let driverPhone = res.data[0].phone;
        ExecCount({ phone: driverPhone }).then((res) => {
          this.execNum = res.msg;
        });
      });
    },
    handleSignin(id) {
      updateDriver({ id: id, reservationStatus: "1" }).then((res) => {
        if (res.code == "500") {
          this.$modal.msgError(res.msg);
        } else if (res.code == "200") {
          this.$modal.msgSuccess(res.msg);
          getselectReservationSign({
            phone: this.iphone,
            reservationStatus: "0",
          }).then((res) => {
            console.log(res);
            this.signInlist = res.data;
            this.signInlength = res.data.length;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.orderSignin {
  width: 100%;
  height: 100%;
  background: url("../assets/images/signView.jpg") no-repeat;
  background-size: 100%;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  .exec {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    background: #ff6868;
    color: #ffffff;
  }
  .title {
    font-size: 18px;
    height: 50px;
    line-height: 1;
    width: 100%;
    text-align: center;
    color: #4a3a3a;
    font-weight: bold;
  }
  ::v-deep .van-cell {
    background-color: #ffffff70;
  }
  .infoContent {
    min-height: 600px;
    text-align: center;
    .info {
      width: 100%;
      height: 175px;
      background: #03a9f4;
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      margin-bottom: 16px;
      .deliveryLeft {
        width: 60%;
        height: 100%;
        margin-top: 6%;
        color: #ffffff;
        .deliveryDate {
          display: flex;
          width: 100%;
          justify-content: center;
          height: 30px;
        }
      }
      .deliveryRight {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>